<!-- 引进图片插件 begin -->
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/uploadify/jquery.uploadify.min.js" ></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/upload.js" ></script>
<link rel="stylesheet" charset="utf-8" type="text/css" href="__PUBLIC__/admin/js/uploadify/uploadify.css"> 
<!-- 引进图片插件 end-->
<style type="text/css">
#feng{ width: 100%; overflow: hidden; float: left; margin: 5px; }
.bg{ background: none; border: none;}
label{ font-size: 16px;}
.uploadify-button-text{ display: inline-flex; }
.uploadify-button-text button{ margin: -10px; }
.upviewer img{ height:90px; width: 120px; }
.upviewer ul{ margin:0px; padding:0px; }
.upviewer li{ margin:0px; padding:0px; position: relative; display:inline-block; width:120px; height:90px; background-position: center; background-size: contain; background-repeat: no-repeat; float: left; margin-right:10px; border:1px #ccc solid; background-color:#f0f0f0;}
.upviewer li a{ display:inline-block; position: absolute; bottom:0px; left:0px; text-align:center; width:100%; background-color:rgba(0,0,0,0.3); color:red; cursor: pointer; }
.upviewer li:hover a{ background-color:rgba(0,0,0,0.8); }
</style>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span12">
    <form role="form" id="form" action="{:U("WxContent/add_content")}" onsubmit="return validation()">
    <!-- 内容说明 -->
   <div class="form-group">
      <label for="name">说明</label>
      <input type="text" class="form-control" id="name" 
         placeholder="说明" name="explain" required />
   </div>
    <div class="form-group">
      <label for="name">类型</label>
      <select name="type" id="tesetSelect" form="form"  onchange="tt(this.id)">
        <option value="text">纯文本</option>
         <option value="pic">图文</option>
       <!--  <option value="voice">语音</option> -->
      </select>
   </div>
    <div class="form-group" id="content">
      <label for="name">标题</label>
      <input type="text" class="form-control" id="content" 
         placeholder="回复内容" name="content" required />
   </div>
     <!-- 响应菜单 -->
     <div class="form-group">
      <label for="name">响应菜单</label>
      <select name="mid" form="form">
        <option value="10010">不响应菜单</option>
        <volist name="list" id="data">
          <option value="{$data.id}"><if condition="$data.name eq ''"></if>{$data.one_name}</option>
             <volist name="data['list']" id="arr">
                <option value="{$arr.id}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{$arr['two_name']}</option>
             </volist>
        </volist> 
      </select>
   </div>

   <div id="feng">
   <div class="form-group">
    
      <label for="upload"><span style="color: red;">*</span>封面照片<span style="color: red;">(只能有1张)</span></label>
      <input type="file" class="form-control" id="upload" placeholder="图片上传"> <br />
      <input type="hidden" name="cover" id="img">
      <div id="view" class="upviewer" style="height:200px;"> </div>
     
     </div>
  </div>

  <!-- 这里放的是链接地址 -->
  <div class="form-group" id="editor">
      <label for="name">链接地址</label>
      <input type="text" class="form-control"  placeholder="链接地址" name="editor" />
   </div>

     <div class="form-group">
   <button type="submit" class="btn btn-default">提交</button>
    </div>
</form>
<!-- 一级菜单 -->
<script type="text/javascript">
//根据菜单类型，弹出适当的选项
var a=$('#tesetSelect').val();//选中的值   
//alert(a);
if (a=='text') {
      $("#editor").hide();
       $("#feng").hide();
       $("#voice").hide();
      $("#content").show();
  };
if (a=='pic') {
     $("#editor").show();
     //$("#content").hide(); 
};
if (a=='voice') {
     $("#editor").hide();
      $("#feng").hide();
};
function tt(id) {
  var aa = document.getElementById(id).value;
  var a=aa;
 //alert(a);
  if (a=='text') {
      $("#editor").hide();
      $("#feng").hide();
      $("#voice").hide();
      $("#content").show();    
  };
  if (a=='pic') {
      $("#editor").show();
      $("#content").show();    
      $("#feng").show();


     // $("#content").hide();
     
  };
  if (a=='voice') {
     $("#editor").hide();
     $("#feng").hide();
     $("#voice").show();
  };
 }
</script>
    </div>
  </div>
</div>


<script type="text/javascript">

$(function(){
  initDelFile();

  initUploadify({ ID:'upload',url:"{:U('Upload/upload')}",success:function(obj){ 
    if(obj.s){
      $('#view').append('<li><img src="'+obj.d+'"/><a d_path="'+obj.d+'">删除</a></li>');
      initDelFile();
    }else{
      alert(obj.m);
    }
  } });
});

function initDelFile(){
  $('.upviewer li a').unbind('click').click(function(){
    if(!confirm('你确认删除吗?')) return false;
    var _this = $(this);
    var dpath = $(_this).attr('d_path');
    if(!dpath) return false;
    $.post('{:U('Upload/delfile')}',{filepath:dpath},function(obj){ 
      if(obj.s){ 
        $(_this).parents('li').remove();
      }else{
        alert(obj.m);
        $(_this).parents('li').remove();
      } 
    },'json');
  });
}
  function validation(){  
  var img=$('#view').html().trim();//获取值    
    var listimg=$('#img').val(img);//写入值
    var listnum=document.getElementById("view").getElementsByTagName("img");//验证数量
    var type=$("#tesetSelect").val();
    if (type=="pic") {
      if(img=="")
      {
      alert('请上传一张图');
       return false; 
      }
      if(listnum.length>1)
      {
        alert('列表图只能有一张');
         return false; 
      }

    };
    
}


</script>